<template>
  <div class="provinces-selector">
    <h3>省份选择</h3>
    <div class="select-container">
      <el-select 
        v-model="selectedProvince" 
        @change="handleProvinceChange"
        placeholder="请选择省份"
        class="province-select"
        style="width: 240px"
      >
        <el-option 
          v-for="province in provinces" 
          :key="province.code"
          :label="province.name"
          :value="province.code"
        >
        </el-option>
      </el-select>
    </div>
  
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

interface Province {
  code: string;
  name: string;
}

const provinces: Province[] = [
  { code: '11', name: '北京市' },
  { code: '12', name: '天津市' },
  { code: '13', name: '河北省' },
  { code: '14', name: '山西省' },
  { code: '15', name: '内蒙古自治区' },
  { code: '21', name: '辽宁省' },
  { code: '22', name: '吉林省' },
  { code: '23', name: '黑龙江省' },
  { code: '31', name: '上海市' },
  { code: '32', name: '江苏省' },
  { code: '33', name: '浙江省' },
  { code: '34', name: '安徽省' },
  { code: '35', name: '福建省' },
  { code: '36', name: '江西省' },
  { code: '37', name: '山东省' },
  { code: '41', name: '河南省' },
  { code: '42', name: '湖北省' },
  { code: '43', name: '湖南省' },
  { code: '44', name: '广东省' },
  { code: '45', name: '广西壮族自治区' },
  { code: '46', name: '海南省' },
  { code: '50', name: '重庆市' },
  { code: '51', name: '四川省' },
  { code: '52', name: '贵州省' },
  { code: '53', name: '云南省' },
  { code: '54', name: '西藏自治区' },
  { code: '61', name: '陕西省' },
  { code: '62', name: '甘肃省' },
  { code: '63', name: '青海省' },
  { code: '64', name: '宁夏回族自治区' },
  { code: '65', name: '新疆维吾尔自治区' },
  { code: '71', name: '台湾省' },
  { code: '81', name: '香港特别行政区' },
  { code: '82', name: '澳门特别行政区' },
];

const selectedProvince = ref<string>('');
// 发射事件
const emit = defineEmits<{
  provinceSelected: [provinceCode: string, provinceName: string]
}>();

const handleProvinceChange = () => {
  const province = provinces.find(p => p.code === selectedProvince.value);
  if (province) {
    emit('provinceSelected', selectedProvince.value, province.name);
  }
};

const getSelectedProvinceName = () => {
  const province = provinces.find(p => p.code === selectedProvince.value);
  return province?.name || '';
};
</script>

<style scoped>
.provinces-selector {
  padding: 20px;
}

.select-container {
  margin: 15px 0;
}

.selected-info {
  margin-top: 15px;
  padding: 10px;
  background-color: #f0f9ff;
  border-radius: 4px;
  border-left: 4px solid #409eff;
}

.selected-info p {
  margin: 0;
  color: #409eff;
  font-weight: 500;
}
</style>